<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>

<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
	<base href="<%=basePath%>">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> ${headerTitle }</title>
	
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1";/><!-- IE的渲染模式 -->
    <meta name="keywords" content="信帧,teleframe,iparking,I停车,爱停车,blackshadowwalker" />
	<meta name="description" content="信帧,teleframe,iparking,I停车,爱停车,blackshadowwalker" />
	<meta name="author" content="blackshadowwalker" />
    
	<link href="bootstrap/3/css/bootstrap.css" rel="stylesheet"/>
	<link href="index/css/justified-nav.css" rel="stylesheet">

	<script src="scripts/jquery/jquery-1.7.min.js"></script>
	<script src="scripts/jquery/jquery-ui/js/jquery-ui-1.8.16.custom.min.js"></script>
	<script src="bootstrap/3/js/bootstrap.min.js"></script>
	<link href="bootstrap/3/css/datepicker.css" rel="stylesheet"/>
	<script src="bootstrap/3/js/bootstrap-datepicker.js"></script>
	
	<link href="css/common.css" rel="stylesheet"/>
	
	<style>
		body{
			margin-left: 10px;
			margin-top: 7px;
		}
		.box {
			padding: 6px;
			margin-bottom: 10px;
			background-color: #f6f6f6;
			color: #505050;
			line-height: 1.5em;
			border: 1px solid #e4e4e4;
			font-size:10px;
		}
		legend{
			font-size: 11px;
			width: auto;
			border-bottom: 0px solid #e5e5e5;
			margin-bottom: 1px;
		}
		fieldset {
			border: 1px solid #e4e4e4;
			margin: 0;
			padding-left: 10px;
		}
	</style>

</head>
<body>

<div  class="main"  >
	
	<div>
		<div class="alert-info" style="">
			<a href="${action }?" class="btn btn-warning">返回</a>
			<div style="display:inline;margin-left:30px;color:#f00;">
				${msg }
			</div>
		</div >
	</div>
	
	<ul class="nav nav-tabs" name="nav-tabs" role="tablist">
		<li class="active" name="box"><a href="javascript:show('box');"><i class="glyphicon glyphicon-th-large"></i></a></li>
		<li name="list"><a href="javascript:show('list');"><i class="glyphicon glyphicon-list-alt"></i></a></li>
	</ul>

	<br />
 
	
	<div class="content" type="list" >
	  	<form id="myform" class="form-horizontal" action="${action }?method=${method}&id=${id}" method="post" >
	  	  	
	  	  	<div class="hidden">
	  	  		<input name="token"/>
	  	  		<input name="roleInfo.roleId" value="${roleInfo.roleId}"/>
	  	  	</div>
	  	  	
	  	  	<br/>
			<div class="form-group">
				<s:if test="roleInfo.flag<1">
					<s:set name="disabled" value="'disabled'" ></s:set>
				</s:if>
				<s:else>
					<s:set name="disabled" value="" ></s:set>
				</s:else>
			
			    <label class="col-sm-2 control-label"><span style="color:#f00">*</span>角色名称：</label>
			    <div class="col-sm-5">
					 <input class="form-control" name="roleInfo.roleName" ${disabled } value="${roleInfo.roleName}" 
					 		isValidate="true" notEmpty="true"  notSpecial="true"  specialChar="~!@#$%^&*()+ |?"  leng="40" minLeng="4"/>
			    </div>
			</div><!-- form-group -->
			<div class="form-group">
				<s:if test="roleInfo.flag>0">
					<s:set name="disabled" value="" ></s:set>
				</s:if>
				<s:else>
					<s:set name="disabled" value="'disabled'" ></s:set>
				</s:else>
			
			    <label class="col-sm-2 control-label"><span style="color:#f00">*</span>状态设定：</label>
			    <div class="col-sm-5">
			    	<select class="form-control" name="roleInfo.status"  >
			    		<option value="1">正常</option>
			    		<option value="0">锁定</option>
			    	</select>
			    	<script>
						$("select[name='roleInfo.status']").val("${roleInfo.status}");
					</script>
			    </div>
			</div><!-- form-group -->
				
			<div class="form-group">
				<label class="col-sm-2 control-label"> 操作：</label>
			    <div class="col-sm-5">
			   		 	<div style="width:500px;">
			   		 		<label class="labelchekbox" for="checkebox_all">
								<input type="checkbox" id="checkebox_all" onclick="selectAll(this,'');" />全选  
			   		 		</label>
			   		 		<label class="labelchekbox" for="checkebox_readonly">
									<input type="checkbox" id="checkebox_readonly" onclick="selectAll(this,'readonly');" />只读全选    
			   		 		</label>
			   		 		<s:iterator value="methodsList" status="st"> 
			   		 			<label class="labelchekbox" for="checkebox_${st.index }">
									<input type="checkbox" id="checkebox_${st.index }" onclick="selectAll(this,'${method}');" /> [${name }]全选  
				   		 		</label>
			   		 		</s:iterator>
						</div>
			    </div>
			</div><!-- form-group -->
			
			<div class="form-group">
				<label class="col-sm-2 control-label"><span style="color:#f00">*</span>权限：</label>
			    <div class="col-sm-5">
			   		 <ul class="list-group" id="Permissions">
			   		 	
						<s:iterator id="l" value="rulerList" status="s">
							<s:if test="level==1">
								 <li class="list-group-item collapse" >
								 	<label for="rulerList_menu_1_${rulerid}" class="labelchekbox">
										<s:if test="checked==true" >
											<input type="checkbox" name="rulerList[${number }].rulerid" value="${rulerid}"
												id="rulerList_menu_1_${rulerid}"  checked/> 
										</s:if>
										<s:else >
											<input type="checkbox" name="rulerList[${number }].rulerid" value="${rulerid}"
												id="rulerList_menu_1_${rulerid}"  /> 
										</s:else>
										${rulerName} (${description })
									</label> 
								</li>
								<!-- 子菜单  -->
									<ul for="rulerList_menu_1_${rulerid}">
										<s:iterator id="l2"  value="#l.subRulerList" status="index2">
											 <li class="list-group-item" >
													<label for="rulerList_menu_2_${rulerid}" class="labelchekbox">
														<s:if test="checked==true" >
															<input type="checkbox" id="rulerList_menu_2_${rulerid}" 
																name="rulerList[${number }].rulerid"  value="${rulerid}" checked />
														</s:if>
														<s:else >
															<input type="checkbox" id="rulerList_menu_2_${rulerid}" 
																name="rulerList[${number}].rulerid"  value="${rulerid}" />
														</s:else>
														<s:set name="tatal" value="total++" />${tatal }
														${rulerName} (${description })
													</label> 
													<ul for="rulerList_menu_2_${rulerid}">
														<li>
														
															<s:iterator id="lm" value="#l2.methods" status="ms">
																<label for="rulerList_method_${s.index}_${ms.index}_${id}" class="labelchekbox">
																	<s:if test="checked==true" >
																		<input type="checkbox" name="rulerList[${number }].methods[${ms.index }].method" method="${method }"
																			 id="rulerList_method_${s.index }_${ms.index}_${id}" value="${method}" checked />
																	</s:if>
																	<s:else >
																		<input type="checkbox" name="rulerList[${number}].methods[${ms.index }].method" method="${method }"
																			 id="rulerList_method_${s.index }_${ms.index}_${id}" value="${method}"/>
																	</s:else>
																	${name}
																</label> 
															</s:iterator>
																<fieldset>
															</fieldset>
														</li>
													</ul>
											</li>
										</s:iterator>
									</ul>  
							</s:if>
						</s:iterator>
						
					</ul><!-- list-group -->
			    </div>
			</div><!-- form-group -->
			
			<div class="form-group">
			    <label for="inputEmail3" class="col-sm-2 control-label"> </label>
			    <div class="col-sm-5">
		    			<input class="btn btn-success btn-lg btn-block"  type=submit value="提交"   />
						<input class="btn btn-primary btn-lg btn-block"  type="reset" value="重置"  />
			     </div>
			  </div>
		
		</form>
	</div><!-- form  form-horizontal-->
	
</div><!-- main -->

<div>
	<br/>

	
	<br/>
</div>

		
		<script>
		
			$("ul.nav-tabs li").click(function(){
				var tab = $(this);
				var nav = tab.parent();
				$(nav).children("li").each(function()
				{
					var obj = $(this);
					obj.removeClass("active");
				});
				tab.addClass("active");
			});
			
			function show(divtype){
				$("div.content").hide();
				$("div.content[type='"+divtype+"']").show();
			}
		
			$("#myform input[type='submit']").click(function(e){
			    e.preventDefault();//阻止提交按钮的默认 action
			//	if(!$("#myform").validateForm()){
			//		return ;
			//	}
			
				var btn = $(this);
		  		btn.val("正在提交...");
		  		btn.addClass("disabled");
		  		$("#myform fieldset").attr("disabled","disabled");//if user jquery.post
		  		$(btn).parent().children("input[type='reset']").addClass("disabled");
				$("#myform").submit();
			});
		
		
			function selectAll(obj, method){
				var checked = $(obj).attr("checked");
				var checkbox = null;
				if(method==""){
					//全选
					checkbox = $("#Permissions input[type='checkbox']");
				}else if(method=="readonly"){
					//只读全选
					checkbox = $("#Permissions input[type='checkbox'][id^='rulerList_menu_']");
				}else{
					//其他操作，根据method选取checkbox
					checkbox = $("#Permissions input[type='checkbox'][method='"+method+"']");
				}
				
				if(typeof(checked)=="undefined"){
					checkbox.attr("checked", false);
				}else{
					checkbox.attr("checked", true);
				}
			}
		
			$("input[type='checkbox'][id^='rulerList_menu_']").click(function(){
				var checked = $(this).attr("checked");
				var id = $(this).attr("id");
				var checkbox = $("ul[for='"+id+"'] input[type='checkbox']");
				if( typeof(checked)=="undefined"){
					console.log( " checked==undefined ");
					checkbox.attr("checked", false);
					$(this).attr("checked", false);
				}else{
					checkbox.attr("checked", true);
					$(this).attr("checked", true);
				}
				return;
				checkbox.each(function(){
					console.log( $(this) );
					$(this).attr("checked", checked);
				});
			});
			
			
			$(document).ready(function(){
				
				var level = "${rulerInfo.level}";
				if(level=="2")
					$("select[name='rulerInfo.manager']").removeAttr("disabled");
				$("select[name='rulerInfo.level']").val("${rulerInfo.level}");
				$("select[name='rulerInfo.target']").val("${rulerInfo.target}");
				$("select[name='rulerInfo.echo']").val("${rulerInfo.echo}");
				$("select[name='rulerInfo.sortorder']").val("${rulerInfo.sortorder}");
				
				if( $("input[name='rulerInfo.manager']").val()!="0" ){//说明是二级菜单
					$("select[name='rulerInfo.target']").find("option[value='main']").attr("selected","selected");
				}
			});
		
		</script>
		
	</body>
</html>